<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>订单明细</title>
<meta name="description" content="" /> 
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<style type="text/css">
body{
	background-color: #f3f3f3;
	margin: 0px;
	padding: 0px;
}
header{
	display: flex;
	width: 100%;
	height: 44px;
	text-align: center;
	top: 0px;
	left: 0px;
	position: fixed;
	z-index: 19;
	background: #232323;
}
header h1{
	font-size: 18px;
	height: 44px;
	line-height: 18px;
	overflow: hidden;
	width: 100%;
	padding: 0px 38px 0px 38px;
	text-align: center;
	font-weight: 400;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #FFF;
}
.list{
	font-size: 16px;
	margin: 0px;
	background-color: #FFFFFF;
	margin-top: 55px;
	margin-bottom: 15px;
	border-top: #e8e8e8 1px solid;
}
.list div{
	display: flex;
	justify-content:space-between;
	padding: 10px 15px;
	border-bottom: #e8e8e8 1px solid;
}
.list div span{
	
}
.but{
	margin-top: 40px;
	text-align: center;
}
.but button{
	font-size: 18px;
	background: #4ec259 !important;
	color: #FFFFFF !important;
	border: none;
	border-radius: 5px ;
	width: 90%;
	padding: 15px;
}
.price{
	font-size: 16px;
	color: #c90000;
}
.table{
	color: #000000;
	font-size: 14px;
	font-weight: none;
	background-color: #FFFFFF;
	border: #e8e8e8 1px solid;
	border-bottom: none;
	border-right: none;
	width: 100%;
}
.table,.table tr,.table tr td,.table th{
	margin: 0px;
	padding: 0px;
	border-spacing: 0px;
}
.table td,table,th{
	text-align: center;
	height: 35px;
	border: #e8e8e8 1px solid;
	border-top: none;
	border-left: none;
}
.table tr .name{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.badge{
	display: inline-block;
	min-width: 10px;
	padding: 3px 7px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: #999;
	border-radius: 10px;
}
.success{
	background-color: #27AB27;
}
.danger{
	background-color: #CA2E2E;
}
</style>
<header>
    <h1>订单明细</h1>
</header>
<div class="list">
	<div><span>订单编号</span><span>{$T['number']}</span></div>
	<div><span>下单时间</span><span>{$T.create_time|date="Y年m月d日"}</span></div>
	{if $T['customer']['company']!=''}<div><span>企业名称</span><span>{$T['customer']['company']}</span></div>{/if}
	<div><span>客户昵称</span><span>{$T['customer']['name']}</span></div>
</div>
<div style="margin: 0px;padding: 0px;">
	<table class="table">
		<thead>
		  <tr>
		    <th width="18%">编号</th>
		    <th width="15%">色号</th>
		    <th width="25%">颜色</th>
		    <th width="10%"></th>
			<th width="17%">数量</th>
			<th width="15%">单价</th>
		  </tr>
		  {volist name="info" id="v"}
		  <tr>
		      <td>{$v.number}</td>
			  <td>{$v.color}</td>
			  <td>{$v.colorname}</td>
			  <td style="background:#{$v.colorval}"></td>
			  <td>{if $v.roll>0}{$v.roll} 匹{else/}{$v.count} {$v.unit}{/if}</td>
			  <td>{$v.unitprice|price_one}</td>
		  </tr>
		  {/volist}
		</thead>
		<tbody>
	</table>
</div>
<div class="list" style="margin-top: 15px;">
	<div><span>状态</span><span>
		{if $T['status'] == 1}
		<span class="success badge">已付</span>
		{elseif $T['status'] == 2/}
		<span class="danger badge">退货</span>
		{else/}
		<span class="defualt badge">草稿</span>
		{/if}
	</span></div>
	<div><span>运费</span><span>￥ {$T['freight']} 元</span></div>
	<div><span>优惠</span><span>￥ {$T['coupon']} 元</span></div>
	<div><span>总金额</span><span class="price">￥ {$T['total']} 元</span></div>
</div>

</body>
<script>
</script>
</html>